<template>
    <view class="shopInfo" :style="{ height: formHeight }">
        <view class="shop">
            <view class="shopTitle">
                {{product.productName}}
            </view>
            <view class="shopDetail">
                {{product.productDescription}}
            </view>

            <view class="shopImgTop">
                <view class="mainImg1">
                    <image :src="imgPrefixL + `${mainImgList[0]}`" mode="aspectFill">
                    </image>
                </view>
                <view class="detailImgs">
                    <view class="detailImg" v-for="(item,index) in detailImgList">
                        <image :src="imgPrefixL + `${item}`" mode="aspectFill">
                        </image>
                    </view>
                </view>
            </view>

            <view class="shopMiddleImg" v-if="product.bannerImgId != Null">
                <image :src="imgPrefixL + `${product.bannerImgId}`" mode="scaleToFill">
                </image>
            </view>

            <view class=" shopBottomImg" v-if="mainImgList[1] != null">
                <view class="mainImg2">
                    <image :src="imgPrefixL + `${mainImgList[1]}`" mode="aspectFill">
                    </image>
                </view>
                <view class="mainImg2">
                    <image :src="imgPrefixL + `${mainImgList[2]}`" mode="aspectFill">
                    </image>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    import {
        getShopInfoByProductId
    } from '@/api/info/index.js';
    export default {
        name: "shopDetail",
        data() {
            return {
                isShow: false,
                product: {},
                mainImgList: [],
                detailImgList: [],
                imgPrefixL: process.env.VUE_APP_IMG_BASE_URL,
                startX: 0, // 记录触摸起始位置
                isMoving: false, // 是否正在滑动
            };
        },
        created() {
            this.getShopDetail()
        },
        methods: {
            getShopDetail() {
                getShopInfoByProductId(this.productId).then(res => {
                    //主图集合
                    let mainImgIds = res.data.productVo.mainImgId
                    this.mainImgList = mainImgIds.split(',')
                    //详情图集合
                    let detailImgIds = res.data.productVo.detailImgId
                    this.detailImgList = detailImgIds.split(',')
                    this.product = res.data.productVo
                })
            },
        },
        computed: {
            productId() {
                return this.$store.state.productId;
            },
            formHeight() {
                if (this.product.bannerImgId && this.mainImgList[1] != null) {
                    return '1179.649rpx;'
                } else if (this.product.bannerImgId) {
                    return '896.984rpx;'
                } else if (this.mainImgList[1]) {
                    return '723.618rpx;'
                } else if (!this.product.bannerImgId && !this.mainImgList[1] != null) {
                    return '470rpx;'
                }
            }
        },
    }
</script>


<style lang="scss">
    @import "uview-ui/index.scss";

    .shopInfo {
        width: 100%;
        background: rgba(198, 230, 129, 0.1);

        .shop {
            width: 702.262rpx;
            height: 100%;
            margin: 0 auto;

            .shopTitle {
                height: 17.588rpx;
                line-height: 17.588rpx;
                padding-top: 12.563rpx;
                font-size: 15rpx;
                color: rgba(0, 0, 0, 0.75);
            }


            .shopDetail {
                margin-top: 3.768rpx;
                font-size: 7.538rpx;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                color: rgba(128, 128, 128, 1);
            }

            .shopImgTop {
                margin-top: 13.191rpx;
                width: 100%;
                height: 332.915rpx;
                display: flex;
                flex-direction: row;

                .mainImg1 {
                    width: 319.096rpx;
                    height: 332.915rpx;

                    image {
                        width: 319.096rpx;
                        height: 332.915rpx;
                        border-radius: 6.282rpx;
                    }
                }

                .detailImgs {
                    margin-left: 32.664rpx;
                    width: 350.503rpx;
                    height: 332.915rpx;
                    display: flex;
                    flex-wrap: wrap;
                    justify-content: space-between;

                    .detailImg {
                        width: 153.267rpx;
                        height: 153.267rpx;
                        margin-bottom: 27rpx;

                        image {
                            width: 153.267rpx;
                            height: 153.267rpx;
                            border-radius: 6.282rpx;
                        }
                    }
                }
            }

            .shopMiddleImg {
                margin-top: 45rpx;
                width: 702.262rpx;
                height: 405.779rpx;

                image {
                    width: 100%;
                    height: 405.779rpx;
                    border-radius: 6.282rpx;
                }
            }

            .shopBottomImg {
                margin-top: 47rpx;
                width: 100%;
                height: 204.146rpx;
                display: flex;
                flex-wrap: nowrap;
                justify-content: space-between;

                .mainImg2 {
                    width: 319.096rpx;
                    height: 210rpx;

                    image {
                        width: 319.096rpx;
                        height: 210rpx;
                        border-radius: 6.282rpx;
                    }
                }
            }
        }
    }
</style>